<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>选项卡</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			.tab {
				position: absolute;
				top: 20%;
				left: 40%;
			}
			
			.selected {
				background-color: #aa14cc !important;
			}
			
			.hide {
				display: none;
			}
			
			.hover {
				background-color: #693dcc !important;
			}
			.table_menu ul li {
				list-style: none;
				float: left;
				padding: 8px 25px 8px 25px;
				cursor: pointer;
			}
			
			.tab_box {
				clear: both;
				width: 250px;
				height: 150px;
				border: 1px solid #999;
			}
			.selected2{
				background-color: #26343d;
			}
		</style>
		<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
				var $div_li = $("div .table_menu ul li");
				//设置li的单击事件
				$div_li.click(function() {
					//设置li单击时的样式
					$(this).addClass("selected")
						.siblings().removeClass("selected");
					//记录当前点击li的index            
					var index = $div_li.index(this);
					//选择与li相同index的div显示，其余隐藏   
					$("div .tab_box >div")
						.eq(index).show()
						.siblings().hide();
				}).hover(function() {
					$(this).addClass("hover");
				}, function() {
					$(this).removeClass("hover");
				});

			})
		</script>
	</head>

	<body>
		<div class="tab">
			<div class="table_menu">
				<ul>
					<li class="selected2">实事</li>
					<li class="selected2">体育</li>
					<li class="selected2">娱乐</li>
				</ul>
			</div>
			
			<div class="tab_box">
				<div>实事版块儿</div>
				<div class="hide">体育版块儿</div>
				<div class="hide">娱乐版块儿</div>
			</div>
		</div>

	</body>

</html>